<script setup lang="ts">
import { reactive, ref } from 'vue'
import AuthInfo from './AuthInfo.vue'
import type { TreeNode } from 'element-plus'
// import { ElMessage } from 'element-plus'
type ITableData = {
  date: string
  name: string
  address: string
  age: number
}
interface IPageData {
  tableData: ITableData[]
  loading: boolean
  age?: number
  pageSize: number
  pageNum: number
  total: number
  showDialog: boolean
}

const pageData: IPageData = reactive({
  tableData: [],
  loading: true,
  pageSize: 10,
  pageNum: 1,
  total: 0,
  showDialog: false
})
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
const dataSource = ref<Tree[]>([])
const getData = async () => {
  pageData.loading = true
  setTimeout(() => {
    dataSource.value = [
      {
        id: 0,
        label: 'Home',
        children: [
          {
            id: 40,
            label: 'Home-Index'
          }
        ]
      },
      {
        id: 1,
        label: '用户管理',
        children: [
          // {
          //   id: 4,
          //   label: 'Level two 1-1',
          //   children: [
          //     {
          //       id: 9,
          //       label: 'Level three 1-1-1'
          //     },
          //     {
          //       id: 10,
          //       label: 'Level three 1-1-2'
          //     }
          //   ]
          // }
        ]
      },
      {
        id: 2,
        label: '角色管理',
        children: [
          {
            id: 5,
            label: 'Level two 2-1'
          },
          {
            id: 6,
            label: 'Level two 2-2'
          }
        ]
      },
      {
        id: 3,
        label: '权限管理',
        children: [
          {
            id: 7,
            label: 'Level two 3-1'
          },
          {
            id: 8,
            label: 'Level two 3-2'
          }
        ]
      },
      {
        id: 4,
        label: 'Abuot'
      }
    ]
  })
  pageData.loading = false
}
getData()
const addChild = (data: Tree) => {
  console.log(data)
  pageData.showDialog = true
}
const closeDialog = (flag: boolean) => {
  pageData.showDialog = false
  if (flag) {
    getData()
  }
}
const doDelete = async (node: TreeNode, data: Tree) => {
  console.log(node, data)
  // await DELETE_ROLE(id)
  // ElMessage.success('删除成功')
  // getData()
}
</script>
<template>
  <el-tree :data="dataSource" node-key="id" default-expand-all :expand-on-click-node="false">
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <a @click="addChild(data)"> Append </a>
          <a style="margin-left: 8px" @click="doDelete(node, data)"> Delete </a>
        </span>
      </span>
    </template>
  </el-tree>
  <AuthInfo v-if="pageData.showDialog" @handleClose="closeDialog"></AuthInfo>
</template>
